<!DOCTYPE html>

<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  <meta name="baidu-site-verification" content="GOgEP8c1pN"/>
  

  <title>
    Django模板标签regroup的妙用_Django小技巧_追梦人物的博客</title>

  <link href="font-awesome.min.css"
        rel="stylesheet">
  <link rel="stylesheet" href="mobi.min.css">
  <link rel="stylesheet" href="modal.min.css">
  <link rel="stylesheet" href="friendly.css">
  <link rel="stylesheet" href="blog.css?v0.12">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="/static/blog/js/menu.js"></script>
  <script src="/static/blog/js/modal.min.js"></script>
  <script src="/static/blog/js/blog.js"></script>
  

  
    <script>
        // baidu statistics
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?fb59b2a6022bccc02671a750f61c356b";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();

        // baidu auto push
        (function () {
            var bp = document.createElement('script');
            var curProtocol = window.location.protocol.split(':')[0];
            if (curProtocol === 'https') {
                bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
            }
            else {
                bp.src = 'http://push.zhanzhang.baidu.com/push.js';
            }
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(bp, s);
        })();
    </script>
    
  
</head>
<body class="bg-light">
<header>
  <nav class="flex-center bg-white nav-bar">
    <div class="container-wider flex-middle">
      
  <a class="show-on-mobile nav-link m-5" id="js-sidebar-btn" href="#" role="button">
    <i class="fa fa-chevron-right" aria-hidden="true"></i>
  </a>

      <a class="nav-bar-logo mr-7" href="/">
        <img src="/static/blog/images/logo.png" alt="blog logo">
      </a>
      <ul class="unit-0 hide-on-mobile nav-bar-nav">
        <li class="nav-item mr-7">
          <a class="nav-link" href="/">首页</a>
        </li>
        <li class="nav-item mr-7">
          <a class="nav-link" href="/tutorials/">教程</a>
        </li>
        <li class="nav-item mr-7">
          <a class="nav-link" href="/categories/">分类</a>
        </li>
        <li class="nav-item mr-7">
          <a class="nav-link" href="/archives/">归档</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/donate/">赞助</a>
        </li>
      </ul>
      <div class="unit flex-right flex-middle">
        <form class="hide-on-mobile flex-left flex-middle search-form mr-5" id="search-form"
              action="/search/">
          <input class="unit" type="search" name="q" placeholder="搜索..."/>
          <button class="unit-0" type="submit" role="button">
            <i class="fa fa-search" aria-hidden="true"></i>
          </button>
        </form>
        <a class="show-on-mobile nav-link fs-7 mr-7" id="js-search-btn" href="#" role="button">
          <i class="fa fa-search" aria-hidden="true"></i>
        </a>
        <div class="flex-middle notification">
          
            <a class="nav-link" href="/accounts/login/">
              <i class="fa fa-sign-in" aria-hidden="true"></i>
            </a>
          
        </div>
        <div class="show-on-mobile flex-middle">
          <a class="nav-link fs-7 ml-7 mr-5" id="menu-toggle" href="#">
            <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
          </a>
          <ul class="menu bg-white" data-menu data-menu-toggle="#menu-toggle">
            <li class="nav-item mr-7">
              <a class="nav-link" href="/">首页</a>
            </li>
            <li>
              <a href="/tutorials/">教程</a>
            </li>
            <li>
              <a href="/categories/">分类</a>
            </li>
            <li>
              <a href="/archives/">归档</a>
            </li>
            <li>
              <a href="/donate/">赞助</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
</header>
<section class="flex-center">
  <div class="container-wider">
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">设置评论回复接收邮箱</h4>
            <div class="text-primary mt-2">邮箱仅用于接收回复提醒，不会被公开。</div>
            
          </div>
          <div class="modal-body">
            <form class="form email-binding-form" action="/comments/ajax_email_binding/">
              <div class="message">
                <span class="text-danger"></span>
              </div>
              <input type='hidden' name='csrfmiddlewaretoken' value='Jma8X5ec0efMvydpX2RR4BydV5dTjKF4w9Sfk2DP3ZEmi0ajeDWBpup2EMT2JiAZ' />
              <div class="flex-left units-gap">
                <label class="unit-0 text-right" for="multiple-inputs-name">邮箱: </label>
                <div class="unit">
                  <input type="email" name="email" id="id_email" placeholder="请输入绑定邮箱"/>
                </div>
                <div class="unit-0">
                  <button class="btn" id="js-send" type="button"
                          data-target="/comments/ajax_verification_code/">发送验证码
                  </button>
                </div>
              </div>
              <div class="flex-left units-gap">
                <label class="unit-0 text-right" for="multiple-inputs-name">验证码: </label>
                <div class="unit">
                  <input type="text" name="verification_code" id="id_verification_code"
                         placeholder="请输入接收到的验证码"/>
                </div>
              </div>
              <div class="flex-right">
                <button type="button" class="btn btn-danger mr-3" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary" id="js-submit">设置</button>
              </div>
            </form>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal -->
    </div>
    <div class="flex-left flex-wrap units-gap-big"
         style="margin-top: 60px">
      
  <main class="unit-3-4 unit-1-on-mobile top-gap">
    


<div class="bg-white card post-card px-7 py-5">
  
<article class="post">
  <h1 class="top-gap-0">Django模板标签regroup的妙用</h1>
  <ul class="list-inline dot-divider post-meta">
    <li class="list-inline-item text-small text-muted">
      7 月前
    </li>
    <li class="list-inline-item text-small text-muted">3431 字
    </li>
    <li class="list-inline-item text-small text-muted">
      3237 阅读
    </li>
    <li class="list-inline-item text-small text-muted">
      16 评论
    </li>
  </ul>
  <div class="top-gap-big post-body">
    <p>在使用 Django 开发时，有时候我们需要在模板中按对象的某个属性分组显示一系列数据。例如博客文章按照时间归档分组显示文章列表（示例效果请看我的博客的<a href="/archives/">归档</a>页面），或者需要按日期分组显示通知（例如<a href="https://www.zhihu.com/">知乎</a>）的通知列表。如果不熟悉 Django 内置的 <code>regroup</code> 模板标签，要完成这个需求可能还得费点功夫，而使用 <code>regroup</code> 则可以轻松完成任务。</p>
<h2 id="regroup-官方文档示例">regroup 官方文档示例</h2>
<p><code>regroup</code> 可以根据一个类列表对象中元素的某个属性对这些元素进行重新分组。例如有这样一个记录各个国家各个城市信息的列表：</p>
<div class="codehilite"><pre><span></span><span class="n">cities</span> <span class="o">=</span> <span class="p">[</span>
    <span class="p">{</span><span class="s1">&#39;name&#39;</span><span class="p">:</span> <span class="s1">&#39;Mumbai&#39;</span><span class="p">,</span> <span class="s1">&#39;population&#39;</span><span class="p">:</span> <span class="s1">&#39;19,000,000&#39;</span><span class="p">,</span> <span class="s1">&#39;country&#39;</span><span class="p">:</span> <span class="s1">&#39;India&#39;</span><span class="p">},</span>
    <span class="p">{</span><span class="s1">&#39;name&#39;</span><span class="p">:</span> <span class="s1">&#39;Calcutta&#39;</span><span class="p">,</span> <span class="s1">&#39;population&#39;</span><span class="p">:</span> <span class="s1">&#39;15,000,000&#39;</span><span class="p">,</span> <span class="s1">&#39;country&#39;</span><span class="p">:</span> <span class="s1">&#39;India&#39;</span><span class="p">},</span>
    <span class="p">{</span><span class="s1">&#39;name&#39;</span><span class="p">:</span> <span class="s1">&#39;New York&#39;</span><span class="p">,</span> <span class="s1">&#39;population&#39;</span><span class="p">:</span> <span class="s1">&#39;20,000,000&#39;</span><span class="p">,</span> <span class="s1">&#39;country&#39;</span><span class="p">:</span> <span class="s1">&#39;USA&#39;</span><span class="p">},</span>
    <span class="p">{</span><span class="s1">&#39;name&#39;</span><span class="p">:</span> <span class="s1">&#39;Chicago&#39;</span><span class="p">,</span> <span class="s1">&#39;population&#39;</span><span class="p">:</span> <span class="s1">&#39;7,000,000&#39;</span><span class="p">,</span> <span class="s1">&#39;country&#39;</span><span class="p">:</span> <span class="s1">&#39;USA&#39;</span><span class="p">},</span>
    <span class="p">{</span><span class="s1">&#39;name&#39;</span><span class="p">:</span> <span class="s1">&#39;Tokyo&#39;</span><span class="p">,</span> <span class="s1">&#39;population&#39;</span><span class="p">:</span> <span class="s1">&#39;33,000,000&#39;</span><span class="p">,</span> <span class="s1">&#39;country&#39;</span><span class="p">:</span> <span class="s1">&#39;Japan&#39;</span><span class="p">},</span>
<span class="p">]</span>
</pre></div>


<p>我们想按照国家分组显示各个国家的城市信息，效果就像这样：</p>
<ul>
<li>India</li>
<li>Mumbai: 19,000,000</li>
<li>Calcutta: 15,000,000</li>
<li>USA</li>
<li>New York: 20,000,000</li>
<li>Chicago: 7,000,000</li>
<li>Japan</li>
<li>Tokyo: 33,000,000</li>
</ul>
<p>在模板中使用 <code>regroup</code> 模板标签就可以根据 <code>country</code> 属性对 <code>cities</code> 进行分组：</p>
<div class="codehilite"><pre><span></span>{% regroup cities by country as country_list %}

<span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
{% for country in country_list %}
    <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>{{ country.grouper }}
    <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
        {% for city in country.list %}
          <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>{{ city.name }}: {{ city.population }}<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        {% endfor %}
    <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
{% endfor %}
<span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
</pre></div>


<p>基本用法为 <code>{% regroup 类列表对象 by 列表中元素的某个属性 as 模板变量 %}</code></p>
<p>例如示例中根据 <code>cities</code> 列表中元素的 <code>country</code>  属性  <code>regroup</code>  了 <code>cities</code>，并通过 as 将分组后的结果保存到了 <code>country_list</code> 模板变量中。</p>
<p>然后可以循环这个分组后的列表。被循环的元素包含两个属性：</p>
<ul>
<li><code>grouper</code>，就是分组依据的属性值，例如这里的 ‘India’、‘Japan’</li>
<li><code>list</code>，属于该组下原列表中元素</li>
</ul>
<h2 id="博客文章按日期归档">博客文章按日期归档</h2>
<p>官方的例子是分组一个列表，且列表的元素是一个字典。但 <code>regroup</code> 不仅仅限于分组这样的数据结构，只要是一个类列表对象都可以分组，例如一个 <code>QuerySet</code> 对象。举一个博客文章例子，假设博客文章的 Model 定义如下：</p>
<div class="codehilite"><pre><span></span><span class="kn">from</span> <span class="nn">django.db</span> <span class="kn">import</span> <span class="n">models</span>

<span class="k">class</span> <span class="nc">Post</span><span class="p">(</span><span class="n">models</span><span class="o">.</span><span class="n">Model</span><span class="p">):</span>
    <span class="n">title</span> <span class="o">=</span> <span class="n">models</span><span class="o">.</span><span class="n">CharField</span><span class="p">(</span><span class="n">max_length</span><span class="o">=</span><span class="mi">100</span><span class="p">)</span>
    <span class="n">pub_date</span> <span class="o">=</span> <span class="n">models</span><span class="o">.</span><span class="n">DatetimeField</span><span class="p">()</span> <span class="c1"># 文章发布时间</span>
</pre></div>


<p>现在要按照发布日期的年、月对文章进行分组显示，例如最开始给出的我的个人博客的归档页面示例，可以这样做：</p>
<div class="codehilite"><pre><span></span>{% regroup post_list by created_time.year as year_post_group %}

<span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
  {% for year in year_post_group %}
  <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>{{ year.grouper }} 年
    {% regroup year.list by created_time.month as month_post_group %}
    <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
      {% for month in month_post_group %}
      <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>{{ month.grouper }} 月
        <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
          {% for post in month.list %}
          <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;{{ post.get_absolute_url }}&quot;</span><span class="p">&gt;</span>{{ post.title }}<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
          <span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
          {% endfor %}
        <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
      <span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
      {% endfor %}
    <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
  <span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
  {% endfor %}
<span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
</pre></div>


<p>假设模板中有一个包含 <code>Post</code> 列表的变量 <code>post_list</code>，先按照年份对其分组，然后循环显示这些年份，而在某个年份的循环中，又对该年份下的文章按照月份对其分组，然后循环显示该年中各个月份下的文章，这样就达到了一个日期归档的效果。</p>
<p>只要分好组后，就可以任意控制模板显示的内容了，例如你不想循环显示全部文章标题，只想显示各个月份下的文章数量，稍微修改一下模板即可：</p>
<div class="codehilite"><pre><span></span>{% regroup post_list by created_time.year as year_post_group %}

<span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
  {% for year in year_post_group %}
  <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>{{ year.grouper }} 年
    {% regroup year.list by created_time.month as month_post_group %}
    <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
      {% for month in month_post_group %}
      <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>{{ month.grouper }} 月（month.list | length）<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
      {% endfor %}
    <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
  <span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
  {% endfor %}
<span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
</pre></div>


<p>注意这里使用 <code>length</code> 过滤器而不是使用 <code>month.list.count</code> 方法，因为 <code>month.list</code> 已经是不再是一个 <code>QuerySet</code> 对象。</p>
<h2 id="总结">总结</h2>
<p><code>regroup</code> 模板标签对于需要层级分组显示的对象十分有用。但有一点需要注意，<strong>被分组的对象一定要是已经有序排列的</strong>，否则 <code>regroup</code> 无法正确地分组。相信从以上两个示例中你可以很容易地总结出 <code>regroup</code> 模板标签的用法，从而用于自己的特定需求中，例如像知乎一样对用户每天的通知进行分组显示。</p>
    <p class="text-center">
      -- EOF --
    </p>
    <div>
      <button class="btn btn-primary" id="js-reward"><i class="fa fa-jpy"
                                                        aria-hidden="true"></i>
        如果觉得文章对你有帮助，请随意打赏
        <i class="fa fa-chevron-down" aria-hidden="true"></i>
      </button>
      <div class="flex-left flex-wrap units-gap-big mt-4" style="display: none">
        <div class="unit unit-1-on-mobile flex-center">
          <figure>
            <img src="/static/blog/images/weixinpay.jpg" alt="微信支付收款二维码"
                 style="width: 250px">
            <figcaption class="text-center fs-6 mt-2" style="color: green">微信</figcaption>
          </figure>
        </div>
        <div class="unit unit-1-on-mobile flex-center">
          <figure>
            <img src="/static/blog/images/alipay.jpg" alt="支付宝收款二维码" style="width: 250px">
            <figcaption class="text-center fs-6 mt-2 text-primary">支付宝</figcaption>
          </figure>
        </div>
      </div>
    </div>
    <div class="post-tags">
      <ul class="list-inline">
        
      </ul>
    </div>
  </div>
</article>
  <div class="top-gap">
    <div class="jiathis_style">
      <span class="jiathis_txt">分享到：</span>
      <a class="jiathis_button_qzone">QQ空间</a>
      <a class="jiathis_button_tsina">新浪微博</a>
      <a class="jiathis_button_tqq">腾讯微博</a>
      <a class="jiathis_button_weixin">微信</a>
      <a href="http://www.jiathis.com/share?uid=2128865"
         class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis"
         target="_blank">更多</a>
      <a class="jiathis_counter_style"></a>
    </div>
    <script type="text/javascript">
        var jiathis_config = {data_track_clickback: 'true'};
    </script>
    <script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=2128865"
            charset="utf-8"></script>
    <!-- JiaThis Button END -->
  </div>
  <br>
  <div class="top-gap clearfix">
    
      <a href="53.html">
        <i class="fa fa-angle-double-left" aria-hidden="true"></i>
        基类View
      </a>
    
    
      <a class="float-right" href="55.html">
        终于找完工作（内附秋招经历）开始恢复博客更新
        <i class="fa fa-angle-double-right" aria-hidden="true"></i>
      </a>
    
  </div>
  
    <div class="top-gap-big card">
      <div class="card-header">相关文章</div>
      <div class="card-body">
        
        <ul class="mt-0">
          
            没有相关文章
          
        </ul>
      </div>
    </div>
  
  <section class="comment-area top-gap-big" id="comment-area">
    <h5>16 条评论 / 11 人参与</h5>
    
      
<div class="flex-center top-gap login-panel p-7">
  <div>
    <div class="text-muted text-center login-header"><span>登录后回复</span></div>
    <div class="flex-center text-center social-icons mt-3">
                        <span class="weibo mr-3">
                            <a href="/accounts/weibo/login/">
                                <i class="fa fa-weibo" aria-hidden="true"></i>
                            </a>
                        </span>
      <span class="github">
                            <a href="/accounts/github/login/">
                                <i class="fa fa-github" aria-hidden="true"></i>
                            </a>
                        </span>
    </div>
  </div>
</div>
    
    <div class="top-gap-big comment-list">
  
    <div class="flex-left py-4" id="c2312">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars1.githubusercontent.com/u/20892308?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">William Li
          
        </span>
    
  </header>
  <div class="comment-body">
    <p style="">博主，请问你的博客前端是用bootstarp 写的吗？还是其他呢？<br></p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">1 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/2312"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
        <div class="comment-descendant-list">
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c2164">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/15622470?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">pfx546746447
          
        </span>
    
  </header>
  <div class="comment-body">
    <p style="">归档我传入了一个object.all()的queryset,但是显示的有问题,只能显示title,这是为什么呢.<br></p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">2 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/2164"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c2170">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars2.githubusercontent.com/u/13174219?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">追梦人物
          
            <span class="master">[博主]</span>
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">pfx546746447
        

  </header>
  <div class="comment-body">
    <p>可否看看详细代码</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">2 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/2170"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1624">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars3.githubusercontent.com/u/18386319?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">superlead
          
        </span>
    
  </header>
  <div class="comment-body">
    <p>评论做的不错，测试一下~</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">5 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1624"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
        <div class="comment-descendant-list">
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1600">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars0.githubusercontent.com/u/18711999?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">xNew-lly
          
        </span>
    
  </header>
  <div class="comment-body">
    <p>赞<br><br></p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">5 月，3 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1600"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c1601">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars0.githubusercontent.com/u/18711999?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">xNew-lly
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">xNew-lly
        

  </header>
  <div class="comment-body">
    <p>test</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">5 月，3 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1601"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c1602">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars0.githubusercontent.com/u/18711999?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">xNew-lly
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">xNew-lly
        

  </header>
  <div class="comment-body">
    <p><img alt="Image" width="44.4688" height="25"><br></p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">5 月，3 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1602"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1565">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="http://tva2.sinaimg.cn/crop.0.3.751.751.180/5fe2a26ajw8f72nxpttvsj20kv0l10ty.jpg"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">mihelloO
          
        </span>
    
  </header>
  <div class="comment-body">
    <p>很方便，学习了</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">6 月前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1565"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
          <hr class="">
        
        <div class="comment-descendant-list">
          
            <div class="flex-left py-4" id="c1603">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars0.githubusercontent.com/u/18711999?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">xNew-lly
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">mihelloO
        

  </header>
  <div class="comment-body">
    <p>特台湾</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">5 月，3 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1603"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c1604">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars0.githubusercontent.com/u/18711999?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">xNew-lly
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">mihelloO
        

  </header>
  <div class="comment-body">
    <p>发多少吃饭</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">5 月，3 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1604"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
              <hr class="m-0">
            
          
            <div class="flex-left py-4" id="c1625">
              <div class="unit-0">
                <img class="comment-avatar mr-3" src="https://avatars3.githubusercontent.com/u/18386319?v=4"/>
              </div>
              <div class="unit">
                
  <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">superlead
          
        </span>
    
    <span class="reply-label text-small text-muted">
                                                        <i class="fa fa-share" aria-hidden="true"></i>
                                                    </span>
    <span class="nickname text-small text-muted">xNew-lly
        

  </header>
  <div class="comment-body">
    <p>测试一下~</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">5 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1625"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>

              </div>
            </div>
            
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1509">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars1.githubusercontent.com/u/19516766?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">parkouryz
          
        </span>
    
  </header>
  <div class="comment-body">
    <p>点个赞~</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">6 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1509"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
        <div class="comment-descendant-list">
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1484">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars3.githubusercontent.com/u/20026626?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">yangjian
          
        </span>
    
  </header>
  <div class="comment-body">
    <p>这个不错，感谢</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">6 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1484"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
        <div class="comment-descendant-list">
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1472">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars0.githubusercontent.com/u/31231036?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">huangshizhe
          
        </span>
    
  </header>
  <div class="comment-body">
    <p>上来点个赞</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">6 月，2 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1472"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
        <div class="comment-descendant-list">
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1455">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="http://tvax1.sinaimg.cn/default/images/default_avatar_male_180.gif"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">鸣200
          
        </span>
    
  </header>
  <div class="comment-body">
    <p style=""><b>555555</b><br></p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">6 月，3 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1455"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
        <div class="comment-descendant-list">
          
        </div>
      </div>
    </div>
    
      <hr class="m-0">
    
  
    <div class="flex-left py-4" id="c1439">
      <div class="unit-0">
        <img class="comment-avatar mr-3" src="https://avatars3.githubusercontent.com/u/26403967?v=4"/>
      </div>
      <div class="unit">
        <div class="comment-main">
  <header class="comment-user">
        <span class="text-small text-muted nickname">cgDeepLearn
          
        </span>
    
  </header>
  <div class="comment-body">
    <p>赞！感谢博主~</p>
  </div>
  <footer class="comment-footer flex-left">
    <ul class="unit list-inline dot-divider">
      <li class="list-inline-item">
        <time class="text-small text-muted">6 月，3 周前</time>
      </li>
      <li class="list-inline-item">
        <a href="/comments/reply/1439"
           class="reply-btn text-small text-muted">回复</a>
      </li>
    </ul>
  </footer>
</div>
        
        <div class="comment-descendant-list">
          
        </div>
      </div>
    </div>
    
  
</div>
  </section>
</div>
  </main>

      
  <div class="unit-1-4 unit-1-on-mobile top-gap">
    <div class="scroll-view bg-white card toc-sidebar">
      <div class="card-header">
        目录
      </div>
      <div class="card-body">
        <div class="toc">
<ul>
<li><a href="#regroup-官方文档示例">regroup 官方文档示例</a></li>
<li><a href="#博客文章按日期归档">博客文章按日期归档</a></li>
<li><a href="#总结">总结</a></li>
</ul>
</div>

      </div>
    </div>
  </div>

    </div>
  </div>
</section>
<footer class="bg-white py-5 mt-5 text-small text-muted">
  <div class="flex-center">
    <div>&copy; 2017 追梦人物的博客</div>
  </div>
  
  
  
</footer>
<script>
    $('[data-menu]').menu();

    var InterValObj; //timer变量，控制时间
    var curCount = 120;//当前剩余秒数

    $('#js-send').on('click', function (event) {
        var $this = $(this);
        var $targetURL = $this.attr('data-target');
        $.post(
            $targetURL,
            {email: $('#id_email').val()},
            function (data) {
                if (data.ok) {
                    $this.attr("disabled", "true");
                    $this.text("重新发送验证码" + "(" + curCount + ")");
                    InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
                    $('.message')
                        .find('span')
                        .text(data.msg)
                } else {
                    $('.message').find('span').text(data.msg)
                }
            }
        );
        return false;
    });

    //timer处理函数
    function SetRemainTime() {
        if (curCount === 0) {
            window.clearInterval(InterValObj);//停止计时器
            $('#js-send').removeAttr("disabled");//启用按钮
            $('#js-send').text("重新发送验证码");
        }
        else {
            curCount--;
            $('#js-send').text("重新发送验证码" + "(" + curCount + ")");
        }
    }

    $('#js-submit').on('click', function (event) {
        var $this = $(this);
        var $form = $('.email-binding-form');
        var $targetURL = $form.attr('action');
        console.log($targetURL);

        $.post(
            $targetURL,
            {
                email: $('#id_email').val(),
                verification_code: $('#id_verification_code').val()
            },
            function (data) {
                if (data.ok) {
                    location.reload();
                } else {
                    $('.message')
                        .find('span')
                        .text(data.msg)
                }
            }
        );
        return false;
    });


    var editor = new Simditor({
        textarea: $('#id_comment'),
        placeholder: "提出你的见解...",
        toolbarFloat: false,
        cleanPaste: true,
        toolbar: [
            'bold',
            'italic',
            'underline',
            'strikethrough',
            'color',
            'ol',
            'ul',
            'blockquote',
            'code',
            'table',
            'link',
            'image',
            'hr'
        ]
    });
</script>


</body>
</html>